<!-- 虚拟券奖品详情 -->
<template>
  <a-modal
    v-model:visible="vdata.visible"
    :title="'福分奖品详情'"
    :maskClosable="false"
    :body-style="{ paddingBottom: '80px' }"
    width="40%" 
    :close="onClose"
    :footer="null"
  >
    <a-row justify="space-between" type="flex">
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="批次号">
            {{ vdata.detailData.batchNo }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="福分奖品名称">
            {{ vdata.detailData.scoreName }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="面值">
            {{ vdata.detailData.scoreValue }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="总数量/已领取数量">
            {{ (vdata.detailData.scoreNum === 0 ? '无限制' : vdata.detailData.scoreNum) + '/' + (vdata.detailData.scoreGet || 0) }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <!-- <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="预算">
            {{ vdata.detailData.scoreAmount }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col> -->
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="过期规则">
            <template v-if="vdata.detailData.overType == 0">领取后{{ vdata.detailData.overDays }}天过期</template>
            <template v-else-if="vdata.detailData.overType == 1">{{ dayjs(vdata.detailData.overTime).format('YYYY[年]M[月]D[日]') }}过期</template>
            <template v-else>领取后次季度首月月底过期</template>
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="状态">
            <span v-if="vdata.detailData.state == 0">草稿</span>
            <span v-if="vdata.detailData.state == 1">下线</span>
            <span v-if="vdata.detailData.state == 2">上线</span>
            <span v-if="vdata.detailData.state == 3">已过期</span>
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="12">
        <a-descriptions>
          <a-descriptions-item label="机构号">
            {{ vdata.detailData.agentNo }}
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
      <a-col :sm="24">
        <a-descriptions>
          <a-descriptions-item label="备注">
            <a-textarea :value="vdata.detailData.remark" :rows="3" disabled />
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
    </a-row>
  </a-modal>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import dayjs from 'dayjs'
import { useUserStore } from '@/store/modules/user'

const vdata: any = reactive({
  btnLoading: false,
  detailData: {}, // 数据对象
  recordId: null, // 更新对象ID
  visible: false, // 是否显示弹层/抽屉
})

/**
 * 进度条
 * @param isShowGlobalLoadingVal 
 */
function myGlobalLoadingFunc(isShowGlobalLoadingVal) {
  useUserStore().setGlobalLoading(isShowGlobalLoadingVal)
}

// 弹层打开事件
function show(record) {
  vdata.detailData = record
  vdata.visible = true
}
function onClose() {
  vdata.visible = false
}
defineExpose({
  show //抛出show函数给父组件
})
</script>
